<template>
  <div class="three3D-section">
    <div class="top_left">
      <AccuracyNoLstm />
    </div>
    <div class="top_right">
        <AccuracyLstm />
    </div>
    <div class="bottom_left">
      <EnergyNoLstm />
    </div>
    <div class="bottom_right">
        <EnergyLstm />
    </div>
  </div>
</template>

<script setup lang="ts">
import AccuracyNoLstm from './AccuracyNoLstm.vue'
import EnergyNoLstm from './EnergyNoLstm.vue'
import AccuracyLstm from './AccuracyLstm.vue'
import EnergyLstm from './EnergyLstm.vue'

</script>

<style scoped lang="scss">
.three3D-section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .top_left,
    .top_right,
    .bottom_left,
    .bottom_right{
        width: 47%;
        height: 43vh;
        margin-top: 0.5rem;
    }
}
</style>
